<template>
    <el-dialog
        :close-on-click-modal="false"
        v-model="dialogFormVisible"
        :title="title"
        width="960px"
        :before-close="handleClose"

    >
        <el-form
            v-loading="formLoading"
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="120px"
            class="demo-form"
            :size="formSize"
            status-icon
        >
            <el-form-item label="父级权限：" required prop="parentId">
                <el-select v-model="form.parentId" style="width: 100%;" placeholder="请选择权限"
                           v-if="form.parentId > 0 || form.id ">
                    <el-option
                        v-for="item in parentApi"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                    />
                </el-select>
                <el-input  v-else disabled value="根目录"/>
            </el-form-item>
            <el-form-item label="权限标题："  required prop="title">
                <el-input v-model.trim="form.title" maxlength="60"  placeholder="请输入权限标题" />
            </el-form-item>
            <el-form-item label="权限路径："  required prop="path">
                <el-input v-model.trim="form.path" maxlength="60"  placeholder="请输入权限路径" />
            </el-form-item>
            <el-form-item label="权限编号"  required prop="path">
                <el-input v-model="form.code" maxlength="60"  placeholder="请输入权限编号" />
            </el-form-item>
            <el-form-item label="权限方法："  required prop="method">
                <el-radio-group v-model="form.method">
                    <el-radio label="GET">GET</el-radio>
                    <el-radio label="POST">POST</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否删除："  required prop="isDeleted">
                <el-radio-group v-model="form.isDeleted">
                    <el-radio :label="1">已删除</el-radio>
                    <el-radio :label="0">未删除</el-radio>
                </el-radio-group>
            </el-form-item>
            <div class="dialog-footer" style="text-align: center">
                <el-button class="kva-button" @click="handleClose" icon="Close" >取消</el-button>
                <el-button class="kva-button" type="primary" @click="handleSubmit" :loading="suLoading" icon="Check">{{ form.id ? "更新" : "保存"}}</el-button>
            </div>
        </el-form>
    </el-dialog>
</template>

<script setup>
import KvaMessage from "@/utils/kvaMessage.js";
import {GetById, LoadRootData,UpdateData,SaveData} from "@/api/sysApi.js"
import debounce from '@/utils/debounce'

// 导出自定义组件数据
const emits = defineEmits(["load"])
// 定义弹窗的属性
const dialogFormVisible = ref(false)
// 定义弹出标题
const title = ref("添加权限")

// 定义表单容器
const form = ref({
    parentId: 0,
    title:"",
    path:"",
    method:"POST",
    code:"",
    isDeleted:0
})

// 添加跟权限数据
const parentApi = ref([{id:0,title:"跟目录",parentId:0}])

// 定义表单加载效果
const formLoading = ref(false)
// 定义提交时的加载效果
const suLoading = ref(false)
// 定义表单ref，用于提交时做验证处理
const formRef = ref({})
// 定义表单验证规则
const rules = reactive({
    "title": [{required: true, message: '请输入标题', trigger: 'blur'}],
    "path": [{required: true, message: '请输入路径', trigger: 'blur'}],
})

// 打开弹窗的方法
const handleOpen = async (opid,flag,sort) => {
    dialogFormVisible.value = true
    // 查询父菜单
    await handleLoadRoot()
    if (opid && flag == 'edit'){
        title.value = "编辑权限"
        formLoading.value = true
        const resp = await GetById(opid.id)
        formLoading.value = false
        form.value = resp.data
    }else if(opid && flag == 'child'){
        title.value = "添加子权限"
        form.value.parentId = opid.id
        form.value.path = opid.path+"/"
    }
}

// 保存用户
const handleSubmit = () => {
    suLoading.value = true
    debounce(()=>{
        formRef.value.validate(async (valid, fields) => {
            if (valid) {
                try{
                    form.value.id? await UpdateData(form.value) : await SaveData(form.value)
                    suLoading.value = false
                    // 提示保存成功
                    KvaMessage.notifySuccess(form.value.id?"更新成功":"保存成功")
                    // 关闭弹窗
                    handleClose()
                    // 刷新方法
                    emits("load")
                }catch(ex){
                    suLoading.value = false
                }
            }else{
                suLoading.value = false
            }
        })
    },1000)
}

// 关闭弹窗的方法
const handleClose = () => {
    // 关闭弹窗的属性
    dialogFormVisible.value = false
    // 清空父权限菜单
    parentApi.value = [{id:0,title:"根目录",parentId:0}]
    // 清空id
    delete form.value.id
    // 清空弹窗菜单数据
    formRef.value.resetFields()
}


// 查询父菜单
const handleLoadRoot = async () => {
    const resp = await LoadRootData()
    parentApi.value = parentApi.value.concat(resp.data)
}

// 导出组件
defineExpose({
    handleOpen
})

</script>
